<template>
	<view class="container">
		<view class="user-header">
			<view class="user-info">
				<u-avatar class="avatar" :src="userInfo.avatar" size="80"></u-avatar>
				<view class="" v-if="!loginState">
					<text>登录/注册 >></text>
				</view>
				<view class="" v-if="loginState">
					<view class="">
						<text>{{userInfo.nickname}}</text>
					</view>
					<view class="" style="display: flex;">
						<view class=""><text>{{userInfo.username}}</text></view>
						<u-icon name="man" v-if="userInfo.gender === '男'"></u-icon>
						<u-icon name="woman" v-if="userInfo.gender !== '男'"></u-icon>
					</view>
					<view class="">{{userInfo.signature}}</view>
				</view>
			</view>
			<view class="user-header-icons">
				<u-icon name="grid" size="28"></u-icon>
				<u-icon name="setting" size="28" @click.native="settingClick"></u-icon>
				<u-icon name="chat" size="28" @click.native="msgClick"></u-icon>
			</view>
		</view>

		<view class="panel-list">
			<view class="cust-panel">
				<u-grid :border="false" @click="gridItemClick" col="4">
					<u-grid-item v-for="(funcButtonItem,index) in funcButtons" :key="index">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="funcButtonItem.name" :size="22"></u-icon>
						<text class="grid-text">{{funcButtonItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
      
      <view class="cust-panel">
        <uni-card class="order-card" title="订单" extra="全部订单" margin="0px" spacing="6px" padding="2px">
          <template v-slot:title>
            <view class="card-header">
              <view class="card-header-box">
                <view class="card-header-content">订单</view>
              </view>
              <view class="card-header-extra">
                <view class="card-header-extra-text" @click.native="showAllOrder">全部订单 >></view>
              </view>
            </view>
          </template>
          
          <u-grid col="4">
            <u-grid-item @click.native="gotoOrderList(1)">
              <u-icon name="star" size="22" :customStyle="{paddingTop:20+'rpx'}"></u-icon>
              <text class="grid-text">待付款</text>
            </u-grid-item>
            <u-grid-item @click.native="gotoOrderList(2)">
              <u-icon name="star" size="22" :customStyle="{paddingTop:20+'rpx'}"></u-icon>
              <text class="grid-text">待发货</text>
            </u-grid-item>
            <u-grid-item @click.native="gotoOrderList(3)">
              <u-icon name="star" size="22" :customStyle="{paddingTop:20+'rpx'}"></u-icon>
              <text class="grid-text">已发货</text>
            </u-grid-item>
            <u-grid-item @click.native="gotoOrderList(4)">
              <u-icon name="star" size="22" :customStyle="{paddingTop:20+'rpx'}"></u-icon>
              <text class="grid-text">待评价</text>
            </u-grid-item>
          </u-grid>
        </uni-card>
      </view>

			<view class="cust-panel">
				<my-list-item label="账号与安全">
					<view>修改密码/手机</view>
				</my-list-item>
				<my-list-item label="实名认证">
					<view></view>
				</my-list-item>
				<my-list-item label="帮助与客服"></my-list-item>
			</view>

		</view>
	</view>
</template>

<script>
	import {mapState,mapActions	} from 'vuex'
	export default {
		data() {
			return {
				funcButtons: [{
					'name': 'coupon',
					'title': '优惠券'
				}, {
					'name': 'star',
					'title': '收藏'
				}, {
					'name': 'kefu-ermai',
					'title': '客服'
				}, {
					'name': 'rmb-circle',
					'title': '余额'
				}],
			}
		},
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			...mapActions(['doUserLogout']),
			gridItemClick(index) {
				console.log(index);
        if (index === 0) {
          this.gotoPage('/subpackages/user-coupon/user-coupon')
        }
        if (index === 1) {
          this.gotoPage('/subpackages/favorite/favorite')
        }
        if (index === 3) {
          this.gotoPage('/subpackages/user-deposit/user-deposit')
        }
			},
			gotoPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			settingClick() {
				this.gotoPage('/subpackages/setting-page/setting-page')
			},
			msgClick() {
				this.gotoPage('/subpackages/msg/msg')
			},
      showAllOrder() {
        this.gotoPage('/subpackages/order/order-list?state=0')
      },
      gotoOrderList(state) {
        this.gotoPage('/subpackages/order/order-list?state=' + state)
      }
		},
		onShow() {
			if (!this.loginState) {
				// uni.navigateTo({
				// 	url: '/subpackages/login-page/login-page'
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #e3e7f0;
	}

	.user-header {
		display: flex;
		justify-content: space-between;
		padding: 180rpx 20rpx 60rpx 20rpx;
		background-color: #aaff7f;
		
		.user-header-icons {
			width: 260rpx;
			height: 60px;
			position: absolute;
			top: 170rpx;
			right: 20px;
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			justify-items: center;
			
			view {margin: 0 0 0 24px;}
		}
	}

	.user-info {
		flex: 1;
		display: flex;
		flex-direction: row;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.panel-list {
		padding: 0 4px;
		position: relative;
		top: -10px;

		.cust-panel {
			background-color: #fff;
			border-radius: 3px;
			margin-bottom: 8px;

			.cust-panel-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 15px;
				padding: 0 10px;
				line-height: 45px;
			}
		}
	}
  .order-card {
    // width: 100%;
    
  }
  .card-header {
    display: flex;
    border-bottom: 1px #EBEEF5 solid;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    overflow: hidden;
    
    .card-header-box {
      display: flex;
      flex: 1;
      flex-direction: row;
      align-items: center;
      overflow: hidden;
      
      .card-header-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        overflow: hidden;
        font-size: 16px;
      }
    }
    .card-header-extra {
      line-height: 12px;
      .card-header-extra-text {
        font-size: 14px;
        color: #909399;
      }
    }
  }
</style>